<template>
  <div>
    <el-dialog title="全部商品" :visible.sync="dialogVisible" width="70%">
      <el-table :data="tableData" height="50vh">
        <el-table-column label="封面图" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.productPic"
              :preview-src-list="[scope.row.productPic]"
            >
            </el-image>
            <div class="shopsDataBox">
              <!-- <div class="Model">颜色：图片色 尺码：110cm</div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="productPrice" label="销售价格" align="center">
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center">
        </el-table-column>
        <el-table-column prop="productCode" label="商品货号" align="center">
        </el-table-column>

        <el-table-column prop="productBrand" label="商品品牌" align="center">
        </el-table-column>
        <el-table-column prop="productQuantity" label="购买数量" align="center">
        </el-table-column>
        <el-table-column prop="storeName" label="供应商" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.status === 0
                ? "未发货"
                : scope.row.status === 1
                ? "已发货"
                : scope.row.status === 2
                ? "已签收"
                : scope.row.status === 3
                ? "售后中"
                : scope.row.status === 4
                ? "退款中"
                : scope.row.status === 5
                ? "已完成"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="deliverySn" label="运单号" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 0"
              @click="sendGoods(scope.row.orderId, scope.row.id)"
              type="text"
              size="small"
              >发货</el-button
            >
            <el-button
              v-if="scope.row.status == 1"
              @click="handleView(scope.row)"
              type="text"
              size="small"
              >查看物流信息</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="添加物流信息"
        :visible.sync="dialogFormVisible"
        append-to-body
      >
        <el-form ref="deliveryFormRef" :model="deliveryForm" :rules="rules">
          <el-form-item label="物流编号" prop="deliverySn">
            <el-input
              v-model="deliveryForm.deliverySn"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="物流公司" prop="deliveryCompany">
            <el-select
              v-model="deliveryForm.deliveryCompany"
              placeholder="请选择物流公司"
            >
              <el-option
                v-for="i of expressCompanyList"
                :key="i.id"
                :label="i.expressName"
                :value="i.expressCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-drawer title="查看物流信息" :visible.sync="dialogViewVisible">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in logisticsInformation"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-drawer>
  </div>
</template>

<script>
import {
  postOrderDelivery,
  fetchExpressList,
  fetchExpressCompanyList,
} from "@/api/OrderManagement";
export default {
  name: "orderDetailDialog",
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      dialogViewVisible: false,
      deliveryForm: {
        deliverySn: "",
        deliveryCompany: "",
        freightAmount: null,
      },
      tableData: [],
      rules: {
        deliverySn: [
          { required: true, message: "请输入物流编号", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        deliveryCompany: [
          { required: true, message: "请选择物流公司", trigger: "blur" },
        ],
      },
      expressCompanyList: [],
      logisticsInformation: [],
    };
  },
  watch: {
    dialogFormVisible() {
      this.deliveryForm.deliverySn = "";
    },
  },
  created() {
    fetchExpressCompanyList().then((res) => {
      if (res.code != 200) return;
      this.expressCompanyList = res.data;
    });
  },
  methods: {
    handleView(i) {
      fetchExpressList(i.id).then((res) => {
        if (res.code == 200) {
          if (res.data == null)
            return this.$message({ type: "error", message: "暂无物流信息" });
          this.logisticsInformation = res.data;
          this.dialogViewVisible = true;
        }
      });
    },
    sendGoods(id, goodsId) {
      this.dialogFormVisible = true;
      this.ids = [id, goodsId];
    },
    handleConfirm() {
      this.$refs.deliveryFormRef.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          const [id, goodsId] = this.ids;
          postOrderDelivery({
            orderId: id,
            id: goodsId,
            ...this.deliveryForm,
          }).then((res) => {
            if (res.code != 200) return;
            this.$message({
              type: "success",
              message: "发货成功",
            });
            this.dialogVisible = false;
            this.$emit("send-goods");
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.el-timeline {
  .el-timeline-item:first-child {
    .el-timeline-item__content,
    .el-timeline-item__timestamp {
      color: #07c160 !important;
    }
    .el-timeline-item__node {
      background: #07c160 !important;
    }
  }
}
</style>
